<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-07 11:03:40
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-11 16:19:41
-->
<template>
  <div class="projectInfo">
    <el-row :gutter="10" style="height: 100%">
      <el-col :span="9" style="height: 100%">
        <div class="content">
          <h3>项目类型分类</h3>
          <div class="chart" id="typePie"></div>
        </div>
      </el-col>
      <el-col :span="9" style="height: 100%">
        <div class="content">
          <h3>项目状态分类</h3>
          <div class="chart" id="statusPie"></div>
        </div>
      </el-col>
      <el-col :span="6" style="height: 100%">
        <div class="content" style="padding: 0 24px">
          <div class="desc">
            <img
              src="../../../static/img/platformStatistics/people.png"
              alt=""
            />
            <div class="infoBox">
              <p class="subTitle">当前在场人数</p>
              <p class="subInfo">{{ totalPeople | splitNumber }}</p>
            </div>
          </div>
          <div class="desc borderDesc">
            <img
              src="../../../static/img/platformStatistics/money.png"
              alt=""
            />
            <div class="infoBox">
              <p class="subTitle">项目投资总额</p>
              <p class="subInfo">
                {{ calcMoney | splitNumber
                }}<span>{{ totalMoney >= 100000000 ? '亿元' : '万元' }}</span>
              </p>
            </div>
          </div>
          <div class="desc">
            <img
              src="../../../static/img/platformStatistics/salary.png"
              alt=""
            />
            <div class="infoBox">
              <p class="subTitle">专户代发工资金额</p>
              <p class="subInfo">
                {{ totalSalary | splitNumber }}<span>万元</span>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'platformProject',
  data() {
    return {
      typeList: [],
      statusList: [],
      totalPeople: '',
      totalMoney: '',
      calcMoney: '',
      totalSalary: '',
    }
  },
  async mounted() {
    await this.getProjectTypeList()
    await this.getProjectStatusList()
    this.getTotalPeople()
    this.getTotalMoney()
    this.getTotalSalary()
    this.drawPie({
      id: 'typePie',
      colors: ['#6476F6', '#7DBEFB', '#8BDDB2'],
      data: this.typeList,
    })
    this.drawPie({
      id: 'statusPie',
      colors: ['#65DAAC', '#FFCC99', '#667899'],
      data: this.statusList,
    })
  },
  methods: {
    // 项目类型分类
    getProjectTypeList() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrprojecttype')
        .then((res) => {
          if (!res.data.hasError) {
            this.typeList = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 项目状态分类
    getProjectStatusList() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrprojectstatus')
        .then((res) => {
          if (!res.data.hasError) {
            this.statusList = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 当前在场人数
    getTotalPeople() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hronjobs')
        .then((res) => {
          if (!res.data.hasError) {
            this.totalPeople = res.data.result.total
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 项目投资总额（万元）
    getTotalMoney() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrprojectinvests')
        .then((res) => {
          if (!res.data.hasError) {
            let { total } = res.data.result
            this.totalMoney = total
            this.calcMoney =
              total >= 100000000
                ? (total / 100000000).toFixed(2)
                : (total / 10000).toFixed(2)
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 专户代发金额（万元）
    getTotalSalary() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hraccouts')
        .then((res) => {
          if (!res.data.hasError) {
            this.totalSalary = res.data.result.total
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    drawPie({ id, colors, data } = params) {
      let pieChart = echarts.init(document.getElementById(id))
      // let total = data.reduce((pre, cur) => (pre + cur.value * 1), 0)
      let { total, result } = data
      total = this.splitMethod(total)
      pieChart.setOption({
        color: colors,
        title: {
          zlevel: 0,
          text: ['{value|' + total + '}', '{name|项目总数}'].join('\n'),
          top: 'center',
          left: '29%',
          textAlign: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#333333',
                fontSize: 30,
                fontWeight: 600,
                lineHeight: 40,
              },
              name: {
                color: '#666666',
                fontSize: 14,
                fontWeight: 400,
                lineHeight: 20,
              },
            },
          },
        },
        legend: {
          data: result,
          orient: 'vertical',
          left: '55%',
          top: 'middle',
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 24,
          textStyle: {
            fontSize: 14,
          },
          formatter: function (name) {
            const findValue = (result.find((v) => v.name === name) || {}).value
            return (
              name + '：' + (findValue === 0 || findValue ? findValue : '--')
            )
          },
        },
        series: [
          {
            startAngle: 90,
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['30%', '50%'],
            label: {
              show: false,
            },
            data: result,
          },
        ],
        tooltip: {
          trigger: 'item',
        },
      })
      window.addEventListener('resize', () => {
        pieChart.resize()
      })
    },
    // 数字逢三一断
    splitMethod(value) {
      if (value === null || value === undefined) return '--'
      if (value === 0 || value === '0') return '0'
      var intPart = parseInt(Number(value)) //获取整数部分
      var floatPart = ''
      if ((value + '').indexOf('.') > -1) {
        floatPart = '.' + (value + '').split('.')[1]
      }
      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
      if (intPart === 0 && 1 / intPart < 0) {
        return '-' + intPartFormat + floatPart
      } else {
        return intPartFormat + floatPart
      }
    },
  },
}
</script>

<style lang="less" scoped>
.projectInfo {
  height: 272px;
  margin-top: 10px;
  overflow: hidden;
  .content {
    height: 100%;
    background-color: #fff;
    h3 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e3e7e9;
      font-size: 16px;
      color: #333333;
      font-weight: 700;
      padding-left: 16px;
    }
    .chart {
      height: calc(100% - 41px);
    }
  }
  .desc {
    height: calc(100% / 3);
    padding: 20px 0;
    img {
      width: 50px;
      height: 50px;
      margin-right: 16px;
    }
    .infoBox {
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      .subTitle {
        color: #999999;
        font-weight: 400;
      }
      .subInfo {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        margin-top: 6px;
        span {
          font-size: 14px;
          font-weight: 700;
          margin-left: 6px;
        }
      }
    }
  }
  .borderDesc {
    border-top: 1px solid #e3e7e9;
    border-bottom: 1px solid #e3e7e9;
  }
}
</style>
